<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>圆角边框</title>
	<style>
		div{
			width: 200px;
			height: 200px;
			float: left;
		}
		div:nth-child(1){
		/* 	width: 200px;
			height: 200px; */
			/* border: 2px solid #ff0000; */
			background-color: aqua;
			/* background: url(../day03/img/1.jpg) no-repeat; */
			/* background-size: 100% 100%; */
			/* border-radius: 20px 60px; */
		}
		div:nth-child(1):hover{
			border-top-left-radius: 50%;
		}
		div:nth-child(2){
	/* 		width: 200px;
			height: 200px; */
			background-color: #ff0000;
		}
		div:nth-child(2):hover{
			-webkit-border-radius:  10px 40px 80px;
			border-radius: 10px 40px 80px;
		}
		
	</style>
</head>
<body>
	<div ></div>
	<div ></div>
	<div ></div>
</body>
</html>